import { defineComponent, ref } from "vue";
import styles from "./Publicize.module.scss";
import { useElementVisibility } from '@vueuse/core';
import Timedown from "./Timedown/Timedown";
import Notice from "./Notice/Notice";

export default defineComponent({
  setup() {
    const timedownRef = ref(null);
    const timedownIsVisible = useElementVisibility(timedownRef);
    const noticeRef = ref(null);
    const noticeIsVisible = useElementVisibility(noticeRef);
    return () => (
      <div class={styles['header-box']}>
        <img style={{ width: '100%', display: 'block' }} src={require("@/assets/image/header.jpg")} />
        <div ref={timedownRef}>
          {
            timedownIsVisible.value && <Timedown />
          }
        </div>
        <div class={styles.notice} ref={noticeRef}>
          {
            noticeIsVisible.value && <Notice />
          }
        </div>
      </div>
    )
  }
})